<template>
<div class="index">

    <div class="head-box">
        <div class="container">
            <van-image
                round
                width="1.5rem"
                height="1.5rem"
                fit="cover"
                :src="$store.getters['user/userinfo'].avatar"
                />
            <div class="info-box">
                <div class="name">
                    <span>{{ $store.getters['user/userinfo'].name }}</span>
                    <!-- <svg-icon iconClass="edit" className="edit-icon" /> -->
                </div> 
                <div class="grade">
                    <van-button to="/grade" round style="padding: 0 8px;margin-right: 0.2rem;" color="linear-gradient(to right, #af9875, #80725b)" size="mini">{{ $store.getters['user/userinfo'].grade_name }}</van-button>
                    <span class="label">距离下个等级还差：</span>{{ $store.getters['user/userinfo'].last_grow_up.toFixed(2) }}成长值
                </div>     
            </div>
        </div>

    </div>

    <div class="container">
        
        <div class="user-track card">
            <RouterLink to="/cellect-goods" class="item">
                <svg-icon iconClass="collect" className="icon-u" />
                <span>商品收藏</span>
            </RouterLink>
            <!-- <RouterLink to="/cellect-shop" class="item">
                <svg-icon iconClass="love" className="icon-u" />
                <span>店铺收藏</span>
            </RouterLink> -->
            <RouterLink to="/invite-member" class="item">
                <svg-icon iconClass="invite" className="icon-u" />
                <span>邀请</span>
            </RouterLink>
            <RouterLink to="/footprints" class="item">
                <svg-icon iconClass="footprint" className="icon-u" />
                <span>我的足迹</span>
            </RouterLink>
        </div>

        <div class="user-track card">
            <RouterLink to="/order/0" class="item">
                <svg-icon iconClass="delay" className="icon-u" />
                <span>待付款</span>
            </RouterLink>
            <RouterLink to="/order/1" class="item">
                <svg-icon iconClass="wait" className="icon-u" />
                <span>待收货</span>
            </RouterLink>
            <RouterLink to="/order/2" class="item">
                <svg-icon iconClass="afoer-sale" className="icon-u" />
                <span>退款/售后</span>
            </RouterLink>
            <RouterLink to="/order/3" class="item">
                <svg-icon iconClass="order" className="icon-u" />
                <span>全部订单</span>
            </RouterLink>
        </div>

        <div class="cell card" style="text-align: left; padding-left: 0;padding-right: 0;">
            <!-- <van-cell :border="false" title="发票管理" is-link to="/invoice"> -->
            <van-cell :border="false" title="发票管理" is-link to="/invoice">
                <template v-slot:icon>
                    <svg-icon iconClass="inv" className="icon-u inv" />
                </template>
            </van-cell>
            <van-cell :border="false" title="优惠券" is-link to="/coupon" >
                <template v-slot:icon>
                    <svg-icon iconClass="coupon" className="icon-u coupon" />
                </template>
            </van-cell>
            <van-cell :border="false" title="会员中心" is-link to="/grade">
                <template v-slot:icon>
                    <svg-icon iconClass="member" className="icon-u member" />
                </template>
            </van-cell>
            <van-cell :border="false" title="地址管理" is-link to="/address">
                <template v-slot:icon>
                    <svg-icon iconClass="loac" className="icon-u loac" />
                </template>
            </van-cell>
        </div>

        <p class="hot-line">客服服务：4008-400-345</p>

        <van-button color="#da251c" round style="width: 100%;margin-bottom: 20px;" @click="logout">退出登录</van-button>
    </div>

</div>
</template>

<script>
export default {
    created () {
        this.$store.dispatch('user/getInfo')
    },
    methods: {
        logout () {
            this.$dialog.confirm({ title: '退出？', message: '确认退出账号吗' }).then(() => {
                this.$store.commit('user/clearInfo')
            }).catch()
        }
    }
}
</script>

<style lang="less" scoped>
.index {
    padding-top: 10px;
    .head-box {
        width: 100%;
        height: 150px;
        position: relative;
        color: #fff;
        overflow: hidden;
        text-align: left;
        margin-bottom: -50px;
        &::before {
            content: "";
            display: inline-block;
            width: 200%;
            height: 100%;
            background: linear-gradient(to bottom, #e98984, #db2d24);
            position: absolute;
            top: 0;
            left: -50%;
            border-radius: 0 0 50% 50%;
        }
        .container {
            display: flex;
            padding: 20px 0;
        }
        .info-box {
            padding-left: 10px;
            flex: 1;
            .name {
                span {
                    margin-right: 10px;
                    font-size: 16px;
                }
                .edit-icon {
                    color: #ddd;
                    font-size: 14px;
                }
            }
            .grade {
                display: flex;
                align-items: flex-end;
                font-size: 12px;
                margin-top: 8px;
                .label {
                    color: #ddd;
                }
            }
        }
    }

    .user-track {
        display: flex;
        justify-content: space-around;
        a {
            display: inline-flex;
            flex-direction: column;
            width: 70px;
            height: 70px;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            .icon-u {
                font-size: 30px;
                margin-bottom: 10px;
            }
            // &:active {
            //     background-color: #ddd;
            // }
        }
    }

    .cell {
        .icon-u {
            height: 24px;
            font-size: 20px;
            margin-right: 8px;
            vertical-align: 2px;
        }
        .inv {
            color: #9b1a8d;
        }
        .coupon {
            color: #22ac38;
        }
        .member {
            color: #f5ac32 !important;
        }
        .loac {
            color: @priceColor;
        }
    }

    .hot-line {
        padding: 10px 0 10px;
        text-align: left;
        font-size: 12px;
        color: #666;
    }
}
</style>
